<%@page language="java" contentType="text/html; character=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/common/taglibs.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>首页</title>
    <link type="text/css" rel="stylesheet" href="${ctx}/resource/user/css/style.css">
    <style type="text/css">
        #msg-page-list a {
            /*color: unset !important;*/

            text-decoration: underline;
            color: rgb(104,128,250);

        }
        #my-msg-table {
            table-layout: fixed;
        }
        #my-msg-table tr {

        }


        /*必须，表格宽度不随文字增多而变长。*/
        #my-msg-table td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 15px;
        }

    </style>
    <script src="${ctx}/resource/user/js/jquery-1.8.3.min.js"></script>
    <script src="${ctx}/resource/user/js/jquery.luara.0.0.1.min.js"></script>
</head>
<body>
<%@include file="/common/utop.jsp" %>
<!--导航条-->
<div class="width100" style="height: 45px;background: #6880fa;margin-top: 40px;position: relative;z-index: 100;">
    <!--中间的部分-->
    <div class="width1200 center_yh relative_yh" style="height: 45px;">
        <!--普通导航-->
        <div class="left_yh font16" id="pageNav">
            <a href="${ctx}/login/uIndex">首页</a>
            <a href="${ctx}/news/list">公告</a>
            <a href="${ctx}/message/add">留言</a>
        </div>
    </div>
</div>

<div class="width1200 hidden_yh center_yh" style="margin-top: 40px;">
    <div class="right_yh" style="width: 1200px;">
        <div class="hidden_yh" id="spXqpj">
            <a href="javascript:void(0)" class="on">提交留言</a>
            <a href="javascript:void(0)">我的留言</a>
        </div>
        <div class="width100 hidden_yh">
            <div id="spDetail">
                <div class="width100 hidden_yh" style="background: #f0f0f0;padding-top:34px;padding-bottom: 34px;">
                    <div class="width1200 hidden_yh center_yh">
                        <div id="vipRight"
                             style="height: 60px;line-height: 60px;text-indent: 50px; background: #f5f8fa;width: 1200px;border:1px solid #ddd;">
                            提交留言
                        </div>
                        <div class="bj_fff hidden_yh"
                             style="width: 1200px;border: 1px solid #ddd; margin-top: 30px;padding: 50px;">
                            <div class="width100" style="height: 32px;line-height: 32px;">
                                <div class="left_yh fon16 tright" style="width:120px;"><font class="red">*</font>姓名：
                                </div>
                                <input type="text" id="name"
                                       style="width: 243px;border: 1px solid #ddd; outline: none;height: 30px;text-indent: 10px;">
                            </div>
                            <div class="width100" style="height: 32px;line-height: 32px;margin-top: 25px;">
                                <div class="left_yh fon16 tright" style="width:120px;"><font class="red">*</font>手机号：
                                </div>
                                <input type="text" id="phone"
                                       style="width: 243px;border: 1px solid #ddd; outline: none;height: 30px;text-indent: 10px;">
                            </div>
                            <div class="width100" style="height: 100px;line-height: 100px;margin-top: 25px;">
                                <div class="left_yh fon16 tright" style="width:120px;"><font class="red">*</font>内容：
                                </div>
                                <textarea rows="10" cols="60" id="content"
                                          style="width: 300px;border: 1px solid #ddd;outline: none;height: 100px;text-indent: 10px;"></textarea>
                            </div>
                            <div class="width100" style="height: 32px;line-height: 32px;margin-top: 25px;">
                                <a href="javascript:void(0)" class="left_yh block_yh font16 tcenter ff5802 con"
                                   style="width: 244px;height: 33px;line-height: 33px;margin-left:120px;">
                                    提交
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div id="spPj">
                <div class="width100 hidden_yh"
<%--                     style="padding-bottom: 20px;border-bottom: 1px dashed #ddd; margin-bottom: 10px;">--%>
                     style="border-bottom: 1px dashed #ddd; margin-bottom: 10px;">

                    <div style="min-height: 500px; display: flex; justify-content: center; align-items: center"
                         id="my-msg-no-data">
                        <h2 style="width: 150px;margin: 0px auto; color: red;">暂无留言内容</h2>
                    </div>
                    <div id="my-msg-table-wrap" style="min-height: 500px; ">
                        <table id="my-msg-table" style="padding-top: 15px;text-align: center;border-collapse: collapse"
                               width="100%"   >
                            <thead>
                            <tr style="border-bottom: 1px solid #333">
                                <th>留言内容</th>
                                <th>回复内容</th>
                                <th>回复时间</th>
                            </tr>
                            </thead>
                            <tbody id="my-message-list">
                            <tr >
                                <td>请问什么时候有货？</td>
                                <td>明天上午八点</td>
                                <td>2023-10-11 10:00</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div id="msg-page-list" class="pagelist">

                    </div>


                    <%--<c:forEach items="${obj.lys}" var="data" varStatus="l">
                        <div style="width: 790px;float: right;overflow:hidden;margin-top: 20px;">
                            <img src="${ctx}/resource/user/images/x.jpg" style="width: 40px;height: 40px;border-radius: 50%;float: left;border:1px solid #ddd;margin-top: 20px;margin-right: 30px;">
                            <h3 class="font16 c_33 font100" style="color: red;font-weight: bold;">${data.name}</h3>
                            <p class="font14 c_99" style="margin-top: 6px;">
                                <fmt:formatDate value="${data.phone}" pattern="yyyy-MM-dd"/>
                            </p>
                            <p class="font16 c_33" style="margin-top: 6px;">
                                    ${data.content}
                            </p>

                            </div>
                        </div>

                    </c:forEach>--%>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $("#spXqpj a").click(function () {
        $(this).addClass("on").siblings().removeClass("on");
    });
    $("#spXqpj a").eq(0).click(function () {
        $("#spDetail").css({display: "block"}).siblings().css({display: "none"});
    });
    $("#spXqpj a").eq(1).click(function () {

        myMessageList();
        //$("#spPj").css({display: "block"}).siblings().css({display: "none"});
    });

    //$("#msg-page-list").on("click", "")

    /**
     * 请求我的消息列表
     */
    function myMessageList(page, pageSize) {

        $.ajax({
            type: "GET",
            url: "${ctx}/message/myMessageList.do",
            data: {
                "page": page,
                "pageSize": pageSize
            },
            success: function (result) {
                var re = result;
                if (re.res == 0) {
                    alert("请登录");
                    window.location.href = "${ctx}/login/uLogin";
                } else {

                    if (re.data.length == 0) {
                        $("#my-msg-table-wrap").hide();
                        $("#my-msg-no-data").show();
                        $("#spPj").css({display: "block"}).siblings().css({display: "none"});
                        //alert("暂无留言信息");
                        return;
                    }


                    var formatDateTime = function (date) {
                        var y = date.getFullYear();
                        var m = date.getMonth() + 1;
                        m = m < 10 ? ('0' + m) : m;
                        var d = date.getDate();
                        d = d < 10 ? ('0' + d) : d;
                        var h = date.getHours();
                        h=h < 10 ? ('0' + h) : h;
                        var minute = date.getMinutes();
                        minute = minute < 10 ? ('0' + minute) : minute;
                        var second=date.getSeconds();
                        second=second < 10 ? ('0' + second) : second;
                        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
                    }
                    //------当前日期：2015-9-12 10:36:23
                    $("#my-msg-table-wrap").show();
                    $("#my-msg-no-data").hide();
                    /**
                     * 渲染数据
                     */
                    $("#my-message-list").empty();
                    for (let i = 0; i < re.pagesUtils.list.length; i++) {

                        // debugger

                        $("#my-message-list").append('<tr style="border-bottom: 1px solid #333"> \
                            <td>' + re.pagesUtils.list[i].content + '</td> \
                        <td>' + (re.pagesUtils.list[i].answerContent == null ? "": re.pagesUtils.list[i].answerContent) + '</td> \
                        <td>' + (re.pagesUtils.list[i].answerTime == null ? "": formatDateTime(new Date(re.pagesUtils.list[i].answerTime))) + '</td> \
                    </tr>');
                    }

                    /**
                     * 渲染分页
                     */
                    $("#msg-page-list").empty();
                    $("#msg-page-list").append(
                        '共' + re.pagesUtils.totalRecords + '记录，共' + re.pagesUtils.totalPages + '页,\
                         当前第' + re.pagesUtils.pageNo + '页\
                              <a onClick="myMessageList(' + 1 + ')" href="javascript:void(0)">首页</a>\
                             <a onClick="myMessageList(' + re.pagesUtils.prePageNo + ')" href="javascript:void(0)">上一页</a> \
                            <a onClick="myMessageList(' + re.pagesUtils.nextPageNo + ')" href="javascript:void(0)">下一页</a> \
                            <a onClick="myMessageList(' + re.pagesUtils.totalPages + ')" href="javascript:void(0)">尾页</a>'
                    )

                    $("#spPj").css({display: "block"}).siblings().css({display: "none"});


                }
            }
        });
    }

    $(function () {
        $(".addCar").click(function () {
            var id = $("#id").val();
            var num = $("#t_a").val();
            $.ajax({
                type: "POST",
                url: "${ctx}/car/exAdd?itemId=" + id + "&num=" + num,
                success: function (result) {
                    var re = result;
                    if (re.res == 0) {
                        alert("请登录");
                        window.location.href = "${ctx}/login/uLogin";
                    } else {
                        window.location.href = "${ctx}/car/findBySql";
                    }
                }
            });
        });
    });
</script>

<%@include file="/common/ufooter.jsp" %>
</body>
<script>
    $(".con").click(function () {
        var name = $("#name").val();
        var phone = $("#phone").val();
        var content = $("#content").val();
        if (name == null || name == '') {
            alert("请输入姓名");
            return false;
        }
        if (phone == null || phone == '') {
            alert("请输入手机号");
            return false;
        }
        if (content == null || content == '') {
            alert("请输入留言");
            return false;
        }
        $.ajax({
            type: "POST",
            url: "${ctx}/message/exAdd.do",
            data: {
                "name": name,
                "phone": phone,
                "content": content
            },
            success: function (result) {
                alert("您的反馈很重要，谢谢！")
                window.location.href = "${ctx}/message/add";
            }
        });
    });
</script>
</html>



















